<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单确认</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/renting/css/public.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/renting/css/layui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/renting/css/header.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/renting/css/bottom.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/renting/css/tenant_public.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/renting/css/tenant_appointment.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layuimini.css?v=2.0.4.2" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/themes/default.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <style type="text/css">
        .left_show,.right_show{
            display: inline-block;
        }
        .left_show{
            padding: 10px;
        }
        .right_show{
            float: right;
        }
        .layui-input-block{
            margin-left: 0px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="nav">
        <a href="${pageContext.request.contextPath}/renting/index.jsp" class="nav_title">好客租房</a>
        <select class="select">
            <option value="重庆">重庆</option>
            <option value="贵阳">贵阳</option>
            <option value="重庆">重庆</option>
            <option value="贵阳">贵阳</option>
        </select>
        <ul class="nav_ul">
            <li><a href="${pageContext.request.contextPath}/renting/index.jsp">首页</a></li>
            <li><a href="${pageContext.request.contextPath}/renting/pages/onther/Findroom.jsp">轻松找房</a></li>
            <li><a href="${pageContext.request.contextPath}/renting/pages/onther/entry.jsp">房东入驻</a></li>
            <li><a href="${pageContext.request.contextPath}/renting/pages/onther/chat_news.jsp">消息</a></li>
            <li><a href="${pageContext.request.contextPath}/renting/pages/onther/login.jsp" style="color: #2981c8;">登录</a></li>
        </ul>
        <img src="${pageContext.request.contextPath}/renting/img/icon/lianxi-1.png" class="nav_img" style="margin-top: -20px;">
        <p class="nav_phone">
            <span>13301131116</span>
            <span>13301131116</span>
        </p>
    </div>
</div>
<div class="body">
    <div class="portrait_bg">
        <div class="portrait">
            <a href="${pageContext.request.contextPath}/renting/pages/onther/personal.jsp" class="headImg">
                <img style="width: 100px;height: 100px;border-radius: 100%" src="../../img/${drom.avater}">
            </a>
        </div>
        <p class="nickname">点击头像编辑个人资料</p>
    </div>
    <div class="content" style="margin-right: 10%">
        <div class="right_body">
            <div class="right_content">
                <div class="right_title">
                    <p style="text-align: center">订单确认</p>
                </div>
                <div style="background-color:whitesmoke;height: 100%">
                    <div class="house_show">
                        <div class="left_show">
                            <img src="../../img/2_3_0.jpg" style="height: 160px">
                        </div>
                        <div class="right_show">
                            <table class="layui-table" style="width: 670px;" lay-skin="line">
                                <colgroup>
                                    <col>
                                    <col>
                                </colgroup>
                                <tbody>
                                <tr>
                                    <td>房屋类型：</td>
                                    <td class="housetype"></td>
                                </tr>
                                <tr>
                                    <td>租&emsp;&emsp;金：</td>
                                    <td class="houseprice"></td>
                                </tr>
                                <tr>
                                    <td>付款方式：</td>
                                    <td class="housepay"></td>
                                </tr>
                                <tr>
                                    <td>房&emsp;&emsp;型：</td>
                                    <td class="housestayl"></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="bottom_box" style="height: 100%;background-color: wheat;padding: 20px">
                        <div class="layui-input-block">
                            您的姓名<input style="background-color: #e7eaed;color: #666a6d" type="text" name="title" value="${drom.name==null?'您未登录':drom.name}" required  lay-verify="required" readonly autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-block" style="padding-top: 10px;padding-bottom: 10px">
                            租到什么时候？<input id="dateselect" type="date" style="width: 100%;height:40px">
                        </div>
                        <div class="layui-input-inline">
                            总金额(<span class="tipespan" style="color: #2887fc;cursor: pointer">包含押金</span>)
                            <input style="background-color: #e7eaed;color: #666a6d;width:300px" readonly type="text" id="datepay" required lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline" style="margin-left: 50px">
                            共分多少期<input style="background-color: #e7eaed;color: #666a6d;width: 300px" readonly type="text" id="datelong" name="password"  required lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-block" style="margin-top: 20px">
                            <button class="layui-btn layui-btn-normal" style="float: left">取消</button>
                            <button id="commontbtn" class="layui-btn layui-btn-normal" style="float: right">确认订单</button>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
</div>
<div class="bottom">
    <p>沪公网安备 31011402005354号</p>
</div>
</body>
</html>
<script src="${pageContext.request.contextPath}/renting/js/jQuery-3.4.1.js"></script>

<script>


</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/lib/layui-v2.6.3/layui.js"></script>
<script src="${pageContext.request.contextPath}/renting/js/header.js"></script>
<script type="text/javascript">
    judge_login("${pageContext.request.contextPath}/renting/pages/tenant/inspection.jsp","${pageContext.request.contextPath}/renting/pages/onther/login.jsp");
</script>
<script src="${pageContext.request.contextPath}/renting/js/ScrollHolder.js"></script>
<script type="text/javascript">
    //layui全局
    layui.use(["layer"],function (){
        var tempintdex ;

        $(".tipespan").hover(function (){
           tempintdex = layer.tips("租金是该租房的单月房租费用，在租期结束后可退回",".tipespan")
        },function (){
            layer.close(tempintdex);
        });

        //加载绑定数据【房子信息】
        $.ajax({
            url:"${pageContext.request.contextPath}/house/getHouse",
            type:"post",
            async:false,
            data:{"hid":${param.hid}},
            dataType:"JSON",
            success:function (redata){
                console.log(redata);
                var payint = redata.house.paymentMethod;
                if(redata.statecode==0){
                    $(".housetype").text(redata.house.buildingType);
                    $(".houseprice").text(redata.house.price);
                    $(".houseprice").attr("hid",${param.hid});
                    $(".housestayl").text(redata.house.houseType);
                    var tempstr = "";
                    if(payint==0){
                        tempstr = "无需押金，按月付钱";
                    }else{
                        switch (payint){
                            case 1:
                                tempstr="一压一付";
                                break;
                            case 2:
                                tempstr="一压二付";
                                break;
                            case 3:
                                tempstr="一压三付";
                                break;
                            case 4:
                                tempstr="一压四付";
                                break;
                            case 5:
                                tempstr="一压五付";
                                break;
                        }
                    }
                    $(".housepay").text(tempstr);
                    $(".housepay").attr("paytype",payint);
                }else{
                    layer.msg("网络异常...",{icon:2});
                }
            }
        });
    })

    //提交订单
    $("#commontbtn").click(function (){
        $.ajax({
            url:'${pageContext.request.contextPath}/order/addNewOrder',
            type:'post',
            async:false,
            data:{"hid":$(".houseprice").attr("hid"),"enddate":$("#dateselect").val()},
            dataType:"json",
            success:function (redata){
                if(redata.statecode==0){
                    layer.msg(redata.msg,{icon:1})
                }

            },
            error:function (e){
                console.log(e);
            }
        })
    })





    $("#dateselect").change(function (){
        var dates = $(this).val().replaceAll("-","");
        var fqf=Number($(".housepay").attr("paytype"));
        var price = Number($(".houseprice").text())
        var monthf = Number(getMonthNumber(getNowTime(),dates));
        var totalprice;
        if($(".housepay").text().length>4){
            totalprice=monthf*price;
        }else{
            totalprice=monthf*price+price;
        }
        $("#datepay").val(totalprice);
        if(fqf==0){
            $("#datelong").val(monthf);
        }else{
            var tempstr = (monthf/fqf)+"";
            if(tempstr.indexOf(".")!=-1){
                tempstr=tempstr.split(".")[0];
                $("#datelong").val(Number(tempstr)+1);
            }else{
                $("#datelong").val(Number(tempstr));
            }
        }
    })




    //计算时间差
    function getMonthNumber(date1,date2){
        //默认格式为"20030303",根据自己需要改格式和方法
        var year1 =  date1.substr(0,4);//老
        var year2 =  date2.substr(0,4);//新
        var month1 = date1.substr(4,2);
        var month2 = date2.substr(4,2);
        var len=(year2-year1)*12+(month2-month1);
        return len;
    }

    //获取当前时间
    function getNowTime(){
        var date="";
        var dates = new Date();
        date+=dates.getFullYear();
        date+=dates.getMonth()+1;
        date+=dates.getDate();
        return date;
    }
</script>
